<template>
  <div class="accountAdd">
    <gl-breadcrumb class="mb15"
                   :text="nav"></gl-breadcrumb>
    <div class="main">
      <div class="orderform">

        <gl-form :form='form'
                 :form-label='formLabel'
                 :must="must"
                 :rule='rule'
                 ref='form'
                 @change="formSelectChange">
        </gl-form>
        <div class="btn">
          <el-button @click="$router.go(-1)">取 消</el-button>
          <el-button type="primary"
                     @click="submitadmin">确 定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'AccountAdd',
  components: {},
  data() {
    return {
      nav: [],
      form: {
        status: 1
      },
      formLabel: [
        {
          label: '登录账号:',
          prop: 'username',
          inputType: 'text',
          placeholder: '请输入',
          readonly: false
        },
        {
          label: '登录密码:',
          prop: 'password',
          inputType: 'password',
          placeholder: '请输入',
          show: true
        },
        {
          label: '修改密码:',
          prop: 'password',
          inputType: 'password',
          placeholder: '请输入新密码,不输入则不修改',
          show: false
        },
        {
          label: '姓名:',
          prop: 'realname',
          inputType: 'text',
          placeholder: '请输入'
        },
        {
          label: '手机号:',
          prop: 'phone',
          inputType: 'text',
          placeholder: '请输入手机号'
        },
        {
          label: '关联角色:',
          prop: 'role_id',
          options: []
        },
        {
          label: '所属公司:',
          prop: 'company_id',
          options: [],
          readonly: false
        },
        {
          label: '状态:',
          prop: 'status',
          radio: [{ label: '正常', value: 1 }, { label: '禁用', value: 2 }]
        },
        {
          label: '备注:',
          prop: 'remark',
          type: 'textarea',
          text: 'ueditor',
          //   choconfig:{toolbars: [['bold', 'italic', 'underline', 'indent']]},
          placeholder: '请输入备注'
        }
      ],
      must: ['status'],

      rule: {
        username: [
          {
            required: true,
            pattern: /^(\w){6,20}$/,
            message: '只能输入6-20个字母、数字、下划线'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '请输入6-20位密码' },
          {
            pattern: /^(\w){6,20}$/,
            message: '只能输入6-20个字母、数字、下划线'
          }
        ],
        realname: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        phone: [
          {
            required: true,
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '请输入正确手机号码'
          }
        ],
        role_id: [
          { required: true, message: '请选择关联角色', trigger: 'change' }
        ],
        company_id: [
          { required: true, message: '请选择所属公司', trigger: 'change' }
        ]
      },
      companyList: [], // 公司列表
      num: ''
    }
  },
  computed: {
    ...mapGetters(['listInfo'])
  },
  watch: {},
  methods: {
    // 选择器
    formSelectChange(val) {
      if (val.prop == 'role_id') {
        this.rule.company_id[0].required = this.form.role_id == 1 ? true : false
        this.formLabel[6].readonly = this.form.role_id == 1 ? false : true
        if(this.form.role_id != 1){
            this.form.company_id = ''
        }
      }
    },
    // 提交
    submitadmin() {
      if (this.$refs.form.validate()) {
        if (this.num == 1) {
          this.subEdit()
        } else {
          this.subAccount()
        }
      }
    },
    // 新建账号请求
    subAccount() {
      let params = {
        aga_group_id: 1,
        m_username: this.form.username,
        m_password: this.form.password,
        mc_realname: this.form.realname,
        mc_phone: this.form.phone,
        company_id: this.form.company_id,
        role_id: this.form.role_id,
        m_status: this.form.status,
        mc_remark: this.form.remark
      }
      this.http
        .$post('user/api/register', params)
        .then(res => {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.$router.push('/setting/account')
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },
    // 提交编辑
    subEdit() {
      let params = {
        uid: this.listInfo.id,
        m_password: this.form.password,
        mc_realname: this.form.realname,
        mc_phone: this.form.phone,
        mc_remark: this.form.remark,
        company_id: this.form.company_id,
        m_status: this.form.status,
        role_id: this.form.role_id
      }
      this.http
        .$post('user/api/update_info', params)
        .then(res => {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.$router.push('/setting/account')
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },
    // 请求角色
    getRole() {
      this.http
        .$post('system/api/all_role_list')
        .then(res => {
          for (let i = 0; i < res.length; i++) {
            this.formLabel[5].options.push({
              value: res[i].id,
              label: res[i].title
            })
          }
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    }
  },
  created() {
    this.nav = ['账号管理', '新建账号']
    this.getRole()
    this.num = this.$route.query.num
    this.http.$post('admin/customer.api/list_company').then(res => {
      for (let i = 0; i < res.length; i++) {
        this.formLabel[6].options.push({
          label: res[i].company_name,
          value: res[i].company_id
        })
      }
    })
    // 编辑
    if (this.num == 1) {
      this.nav = ['账号管理', '编辑账号']
      this.rule.username[0].required = false
      this.rule.password[0].required = false
      this.formLabel[0].readonly = true
      this.formLabel[1].show = false
      this.formLabel[2].show = true
      if (this.listInfo.role_id != 1) {
        this.rule.company_id[0].required = false
        this.formLabel[6].readonly = true
        this.form.company_id = ''
      }
      let new_form = this.listInfo
      new_form.company_id = new_form.company_id == 0 ? '' : new_form.company_id
      new_form.role_id = new_form.role_id == 0 ? '' : new_form.role_id
      new_form.remark = new_form.remark == '无' ? '' : new_form.remark
      this.form = new_form
    }
  },
  mounted() {}
}
</script>
<style lang='less' scoped>
/deep/ .edui-default .edui-toolbar {
  line-height: 0;
}

.main {
  background-color: #fff;
  margin-top: 20px;
}
.orderform {
  width: 550px;
  margin: 0 auto;
  padding: 30px 0;
  .btn {
    text-align: center;
  }
}
</style>